<template>
  <div class="content">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="数据预警列表" name="first">
        <el-table
          stripe
          style="width: 100%"
          :data="dataWarnLogList"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" class="el-table-box"
        >
          <el-table-column prop="monitorPointName" label="测点名称">
          </el-table-column>
          <el-table-column prop="description" label="预警原因">
          </el-table-column>
          <el-table-column prop="warnLevel" label="数据预警等级">
            <template slot-scope="scope">
              <span v-if="scope.row.warnLevel == 0">正常</span>
              <span v-if="scope.row.warnLevel == 1">一级预警</span>
              <span v-if="scope.row.warnLevel == 2">二级预警</span>
              <span v-if="scope.row.warnLevel == 3">三级预警</span>
            </template>
          </el-table-column>
          <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 15]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="数据预警处理日志列表" name="second">
        <el-table
          stripe
          style="width: 100%"
          :data="dataWarnDealLogList"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          class="el-table-box"
        >
          <el-table-column prop="monitorPointName" label="测点名称">
          </el-table-column>
          <el-table-column prop="dealType" label="处理方式">
            <template slot-scope="scope">
              <span v-if="scope.row.dealType == 0">恢复正常</span>
              <span v-if="scope.row.dealType == 1">一小时内不预警</span>
              <span v-if="scope.row.dealType == 2">十二小时内不预警</span>
              <span v-if="scope.row.dealType == 3">一天内不预警</span>
              <span v-if="scope.row.dealType == 4">三天内不预警</span>
              <span v-if="scope.row.dealType == 5">一周内不预警</span>
            </template>
          </el-table-column>
          <el-table-column prop="dealUser" label="处理人"> </el-table-column>
          <el-table-column prop="warnType" label="数据预警等级">
            <template slot-scope="scope">
              <span v-if="scope.row.warnType == 1">一级预警</span>
              <span v-if="scope.row.warnType == 2">二级预警</span>
              <span v-if="scope.row.warnType == 3">三级预警</span>
            </template>
          </el-table-column>
          <el-table-column prop="warnTime" label="预警时间"> </el-table-column>
          <el-table-column prop="remark" label="处理备注"> </el-table-column>
          <el-table-column prop="dealTime" label="处理时间"> </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"
          :current-page="querys.page"
          :page-sizes="[10, 15]"
          :page-size="querys.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { getDataWarnLogByPage, getDataWarnDealLogByPage ,getTailingPondList} from "../../../api/warning-management-api";
export default {
  name: "Precipitation",
  data() {
    return {
      dialog_flag: false,
      disposeForm: {
        dealType: null,
        note: "",
        monitorPondId: null,
      },
      activeName: "first",
      query: {
        page: 1,
        pagesize: 10,
      },
      querys: {
        page: 1,
        pagesize: 10,
      },
      total: null,
      totals: null,
      dataWarnLogList: [],
      rules: {
        dealType: [
          { required: true, message: "请选择处理方式", trigger: "change" },
        ],
      },
      dataWarnDealLogList: [],
    };
  },
  mounted() {
    this.getTailingList();
    this.getDataWarnLogByPage();
    this.getDataWarnDealLogByPage();
  },
  methods: {
    // 获取尾矿库id
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      if (res.resultCode == "200") {
        this.tailingList = res.parameter;
        window.sessionStorage.setItem("tailingPondId", this.tailingList[0].id); //默认选中
      }
    },
    //分页获取
    async getDataWarnLogByPage() {
      const res = await getDataWarnLogByPage({
        monitorTypeId: 6,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        tailingPondId:sessionStorage.getItem("tailingPondId"),
      });
      if (res.resultCode == "200") {
        this.dataWarnLogList = res.parameter.list;
        this.total = res.parameter.total;
      } else {
        this.dataWarnLogList = [];
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getDataWarnLogByPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getDataWarnLogByPage();
    },
    //设备预警
    async getDataWarnDealLogByPage() {
      const res = await getDataWarnDealLogByPage({
        monitorTypeId: 6,
        pageCount: this.querys.page,
        pageSize: this.querys.pagesize,
        tailingPondId: sessionStorage.getItem("tailingPondId"),
      });
      if (res.resultCode == "200") {
        this.dataWarnDealLogList = res.parameter.list;
        this.totals = res.parameter.total;
      } else {
        this.dataWarnDealLogList = [];
      }
    },
    handleSizeChanges(val) {
      this.querys.pagesize = val;
      this.getDataWarnDealLogByPage();
    },
    handleCurrentChanges(val) {
      this.querys.page = val;
      this.getDataWarnDealLogByPage();
    },
    async handleClick(tab, event) {
      if (tab.name == "second") {
        this.getDataWarnDealLogByPage();
      }
    },
  },

};
</script>

<style scoped>
.el-button {
  width: 80px;
}
.content {
  background: #fff;
}
.el-tabs {
  /* background: #fff; */
  height: 87vh;
}
.el-pagination {
  float: right;
  margin-right: 30px;
  margin-top: 30px;
}
.el-table-box {
  display: block;
  height: 72vh;
  overflow-y: auto;
}
.el-table::before {
  z-index: inherit;
}
</style>
